<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" class="card-box">
                <el-card>
                    <searchForm @init="init" :searchData="searchData" :searchItem="searchItem"></searchForm>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box">
                <el-card>
                    <template #header>
                        <el-button link type="primary" size="small" @click="confirmAdd()">新增</el-button>
                    </template>
                    <my-table
                    :columns="columns"
                        :showIndex="true"
                        :data="tableData"
                        :loading="table_loading"
                        :pagination="pagination"
                        :cellStyle="{ padding: '6px 0' }"
                        @currentChange="currentChange"
                        @handleSizeChange="handleSizeChange"
                    >
                        <template #upgradeWay="slotProps">
                            <el-text class="mx-1" v-if="slotProps.callback.row.upgradeWay == 0">非强制升级</el-text>
                            <el-text class="mx-1" type="primary" v-if="slotProps.callback.row.upgradeWay == 1">强制升级</el-text>
                        </template>
                        <template #state=" slotProps ">
                            <div>{{ slotProps.callback.row.state==0?'已下架':'已上架' }}</div>
                        </template>
                        <template #operation="slotProps">
                            <el-button
                                link
                                type="primary"
                                size="small"
                                @click="handleEdit(slotProps.callback.row)"
                            >编辑</el-button>
                            <el-button
                                link
                                type="primary"
                                size="small"
                                @click="handleUpdateState(slotProps.callback.row)"
                            > {{slotProps.callback.row.state==1?'下架':'上架'}} </el-button>
                            <el-popconfirm
                                title="确认删除？"
                                @confirm="handleDelete(slotProps.callback.row.id)"
                            >
                                <template #reference>
                                    <el-button link type="warning" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </my-table>
                </el-card>
                <el-dialog
                    :title="dialogForm.title"
                    v-model="dialogForm.dialogVisible"
                    :destroy-on-close="true"
                    :close-on-click-modal="false"
                    top="5%"
                    width="500px"
                >
                    <div>
                        <form-page
                            v-model:refObj="formInfo.formRef"
                            :data="formInfo.data"
                            :field-list="formInfo.fieldList"
                            :rules="formInfo.rules"
                            :label-width="formInfo.labelWidth"
                            :list-type-info="listTypeInfo"
                        >
                            <template v-slot:form-item-firmwareUrl>
                                <FileUpload v-model:modelValue="data.firmwareUrl" :limit="1" :fileSize="10" :fileType="['zip','bin','fw']"></FileUpload>
                            </template>
                        </form-page>
                    </div>
                    <template #footer>
                        <span>
                            <el-button size="small" @click="dialogForm.dialogVisible = false">取消</el-button>
                            <el-button size="small" type="primary" @click="handleSubmit">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="productPackage">
import myTable from "@/components/common/table.vue"
import searchForm from "@/components/common/searchForm.vue"
import FileUpload from "@/components/FileUpload/index.vue"
import formPage from "@/components/common/formPage.vue"
import { findFirmwareByPage, addFirmwareMsg, updateFirmwareMsg,
        delFirmwareMsg,ylLevelFirmwareMsgupdateState,findFirmwareDetail } from "@/api/api";
import initRules from '@/utils/initRules'
import { mergeObjOfValue, deepClone } from '@/utils/index'
import { getTableData } from '@/mixins/mixins';
import { nextTick, onMounted, toRefs } from "vue";
const { proxy } = getCurrentInstance();
const columns = ref([
    {
        label: "设备名称",
        prop: "deviceName"
    },
    {
        label: "ID",
        width: 50,
        prop: "id"
    },
    {
        label: "固件版本号",
        prop: "firmwareVersion"
    },
    {
        label: "硬件版本号",
        prop: "hardwareVersion"
    },
    {
        label: "状态",
        prop: "state",
        slot: "state",
    },
    {
        label: "升级包校验码",
        prop: "imageCrc",
    },
    {
        label: "升级包大小",
        prop: "imageSize",
    },
    {
        label: "升级策略",
        prop: "upgradeWay",
        slot:'upgradeWay'
    },
    {
        label: "版本内容",
        prop: "versionContent"
    },
    {
        label: "创建时间",
        prop: "createTime",
        time: true
    },
    {
        label: "更新时间",
        prop: "updateTime",
        time: true
    },
    {
        label: "操作",
        prop: "",
        width: 120,
        align: "left",
        slot: "operation"
    }
])
const searchItem = ref([
    {
        type: "input",
        label: "固件ID",
        prop: "firmwareId",
        placeholder: "请填写固件ID"
    },
])
const searchData = ref({
    studentNumber: "",
    name: "",
    phone: "",
    status: "",
    startTime: "",
    endTime: ""
})
const dialogForm = ref({
    dialogVisible: false,
    title: '新增'
})
const formInfoData = {
    id: null,
    deviceName: "",
    firmwareId: "",
    firmwareUrl: "",
    firmwareVersion: "",
    versionContent: "",
    upgradeWay: '0',
    // remark: "",
    limitOta: "",
    hardwareVersion: "",
    upgradeAmount: "",
    maxDownloadNum: "",
    imageSize: "",
    imageCrc: "",
}
const listTypeInfo = ref({
    upgradeWayList: [
        { label: '强制升级', value: '1' },
        { label: '非强制升级', value: '0' }
    ]
})
const formInfo = reactive({
    formRef: null,
    data: formInfoData,
    fieldList: [
        { label: '设备名称', value: 'deviceName', type: 'input' },
        { label: '固件ID', value: 'firmwareId', type: 'input', required: true },
        { label: '升级文件', value: 'firmwareUrl', slot: true, required: true },
        { label: '固件版本号', value: 'firmwareVersion', type: 'input', required: true },
        { label: '硬件版本号', value: 'hardwareVersion', type: 'input', required: true },
        { label: '升级包校验码', value: 'imageCrc', type: 'input', required: true },
        { label: '升级包大小', value: 'imageSize', type: 'input', required: true },
        { label: '升级人数', value: 'upgradeAmount', type: 'inputNumber', min:1, required: true },
        { label: '最多下载人数', value: 'maxDownloadNum', type: 'inputNumber', min:1, required: true },
        { label: '版本内容', value: 'versionContent', type: 'textarea', required: true },
        { label: '升级方式', value: 'upgradeWay', type: 'radio', list: 'upgradeWayList', required: true },
        { label: '限制OTA版本', value: 'limitOta', type: 'input' },
        // { label: '备注', value: 'remark', type: 'input', }
    ],
    rules: {},
    labelWidth: '110px'
})
const { data, fieldList, rules, formRef } = toRefs(formInfo)
//hook
const {
    tableData,
    pagination,
    table_loading,
    init,
    handleSizeChange,
    handleDelete,
    currentChange,
} = getTableData(findFirmwareByPage, delFirmwareMsg)

// 生成表单验证
function handleInitRules () {
    rules.value = initRules(fieldList.value)
}
// 编辑
function handleEdit (rowData) {
    let params = {
        id:rowData.id
    }
    findFirmwareDetail(params).then((res) => {
        mergeObjOfValue(data.value, res.data)
        data.value.upgradeWay = data.value.upgradeWay+''
        dialogForm.value.title = '编辑'
        dialogForm.value.dialogVisible = true
    })
}
// 新增
function confirmAdd () {
    mergeObjOfValue(data.value, formInfoData)
    dialogForm.value.title = '新增'
    dialogForm.value.dialogVisible = true
}

// 上下架
function handleUpdateState (rowData) {
    let params = {
        id: rowData.id,
        state: rowData.state == 0 ? 1 : 0,
    }
    ylLevelFirmwareMsgupdateState(params).then((res) => {
        init(searchData.value)
    })
}
// 提交
function handleSubmit () {
    formRef.value.validate(valid => {
        if (valid) {
            if (dialogForm.value.title == '新增') {
                addFirmwareMsg(data.value).then(res => {
                    proxy.$modal.msgSuccess("新增成功");
                    dialogForm.value.dialogVisible = false
                    init()
                }).finally(() => {
                })
            } else {
                updateFirmwareMsg(data.value).then(res => {
                    proxy.$modal.msgSuccess("修改成功");
                    dialogForm.value.dialogVisible = false
                    init()
                }).finally(() => {
                })
            }
        }
    });
}
data.value = deepClone(formInfoData)
handleInitRules()
init()
</script>
